<template>
  <div>
    <el-empty description="暂无数据" v-if="worksAll.length == 0">
      <el-button @click="createBook" type="primary" class="el-icon-plus"
        >新建作品</el-button
      >
    </el-empty>
    <div>
      <div class="tuhp" v-for="(book,index) of worksAll" :key="book.id">
        <el-image
          style="width: 150px; height: 180px"
          :src="book.bookImgUrl"
          fit="cover"
        ></el-image>
        <div class="kInfo" style="width: 100%; margin-left: 20px">
          <div>
            <span class="title" style="line-height: 24px">{{
              book.bookName
            }}</span>
            <span style="float: right; line-height: 24px"
              >编辑id:{{ book.editorId }}</span
            >
          </div>
          <div>
            <span style="" class="lastChapter">{{ book.lastChapterName }}</span>
          </div>
          <div class="zbu">
            <span style="line-height: 40px">收藏:{{ book.subscription }}</span>
            <div style="float: right">
              <el-button type="primary" @click="updateBook(book)">信息设置</el-button>
              <el-button type="success" @click="thenSale(book,index)" v-if="book.saleState=='OFF_SALE'">上架</el-button>
              <el-button @click="edit(book.id)" type="info">去写作</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { worksAll,sale } from "@/api";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      worksAll: [],
    };
  },
  methods: {
    ...mapMutations("routeJump", ["WriterActive", "edit"]),
    updateBook(book){
      console.log(book,"-------updateBook-------")
      this.$router.push({
        name: "createBook",
        params:{
          bookId:book.id
        }
      });
    },
    //上架书籍
    thenSale(book,index){
      sale(book.id).then(({data}) => {
        if(data.code == 0){
          this.$message.success("书籍上架成功")
          book.saleState = "NO_SALE";
          this.worksAll.splice(index,1,book);
        }
      }).catch((err) => {
        
      });
    },
    //前往书籍信息设置页面
    createBook() {
      this.$router.push({
        name: "createBook",
        params:{
          bookId:0
        }
      });
    },
  },
  created() {
    worksAll()
      .then(({ data }) => {
        console.log("data",data);
        this.worksAll = data.data;
      })
      .catch((err) => {});
  },
};
</script>

<style scoped>
.tuhp {
  display: flex;
  justify-content: flex-start;
  margin: 10px;
  padding: 10px;
  border-style: 1px solid;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 20px;
  font-weight: bolder;
}
.kInfo {
  position: relative;
}
.zbu {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.lastChapter {
  line-height: 42px;
  color: rgba(21, 26, 48, 0.5);
  font-size: 1.5em;
}
</style>